
<template>
  <div class="pad">
    <el-page-header @back="goBack" :content="articleList[0].enterpriseName">
    </el-page-header>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">{{
        articleList[0].enterpriseName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="firm_card"  v-for="(item, id) in articleList" :key="id" @click.native="lookArticle(item)">
      <el-card class="elcard" v-if="item.knowledgeStatus == 0"
      >
        <!-- <div v-if="item.knowledgeStatus == 1"> -->
         <div @click.stop="lookArticle(item)">
            <img :src="item.knowledgePic" alt="" width="276" height="185" />
        </div>


        <div id="card_icon">
          <el-tooltip class="item" effect="dark" content="修改文章" placement="bottom">
            <el-button class="iii el-icon-edit" @click="editArticle(item)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="设为广告" placement="bottom">
            <el-button class="iii el-icon-s-promotion" @click="setToAd(item)"></el-button>
          </el-tooltip> 

          <el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0" class="item" effect="dark" content="设为轮播" placement="bottom">
            <el-button class="iii el-icon-camera-solid isShow1" @click="showChange(item,$event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.isSlideshow == 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0" class="item" effect="dark" content="禁用轮播" placement="bottom">
            <el-button class="iii el-icon-camera-solid isShow2" @click="showChange(item,$event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeLife == 0" class="item" effect="dark" content="无法操作" placement="bottom">
            <el-button disabled class="iii el-icon-camera-solid isShow3"></el-button>
          </el-tooltip>

          <el-tooltip v-if="item.knowledgeLife == 1" class="item" effect="dark" content="禁用" placement="bottom">
            <el-button class="iii el-icon-switch-button shutdown" @click="handleChange(item, $event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.knowledgeLife !== 1" class="item" effect="dark" content="启用 " placement="bottom">
            <el-button class="iii el-icon-switch-button shutdown2" @click="handleChange(item, $event)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改浏览/收藏量" placement="bottom">
            <el-button class="iii el-icon-s-management" @click="editCollectNum(item)"></el-button>
          </el-tooltip>

          <el-popover v-if="item.knowledgeStatus == 0" class="i_ex" placement="bottom" width="240" trigger="click">
             <div>
              <el-button type="primary" @click="checkAuthorityStatus(item, 1, 1)"
              >通过审核
              </el-button
              >
              <el-button type="danger" @click="checkAuthorityStatus(item, 2, 0)"
              >驳回审核
              </el-button
              >
            </div>
            <el-button id="check1" class=" el-icon-s-check iii" slot="reference"></el-button>
          </el-popover>
          <el-popover v-if="item.knowledgeStatus == 1" class="i_ex" placement="bottom" width="110" trigger="click">
             <div>
              <el-button type="danger" @click="checkAuthorityStatus(item, 3, 0)"
              >管理员禁用
              </el-button
              >
            </div>
            <el-button id="check2" class="el-icon-s-check iii" slot="reference"></el-button>
          </el-popover>

        </div>


        <p class="el_name">{{ item.knowledgeName }}</p>
        <p class="el_like">
          <i class="el-icon-view"> </i>
          {{ item.totalBrowNum }}
          <i class="el-icon-star-off"> </i>
          {{ item.totalCollectNum }}
        </p>
        <p class="el_time">创建时间：{{ item.createDate }}</p>
        <!-- <p class="el_id">用户编号：{{ item.id }}</p> -->

        <span class="el_status2" v-if="item.knowledgeStatus == 1"
          >审核通过</span
        >
     <!-- </div> -->
      </el-card>
    </div>

    <!-- 修改浏览、收藏量 -->
    <el-dialog title="修改浏览、收藏量" :visible.sync="editNum">
      <div>
        <el-form :model="collectData" label-width="80px">
          <el-form-item label="浏览量：">
            <el-input
              v-model.number="collectData.browNum"
              placeholder="请输入整数"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="收藏量：">
            <el-input
              v-model.number="collectData.collectNum"
              placeholder="请输入整数"
            ></el-input>
          </el-form-item>

          <el-form-item style="text-align: right">
            <el-button @click="editNum = false">取 消</el-button>
            <el-button type="primary" @click="isShowEdit">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 设为广告 -->
    <el-dialog title="设置广告" :visible.sync="isShowAdSetting">
      <el-form label-position="top" :model="ad">
        <el-form-item label="广告类型">
          <el-radio-group v-model="adType">
            <el-radio v-for="(item, i) in adTypes" :key="i" :label="i + 1">
              {{ item }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告标题">
          <!-- <el-input v-model="ad.title" /> -->
          <el-select v-model="ad.title">
            <el-option
              v-for="item in advertisingList"
              :key="item.knowledgeName"
              :label="item.knowledgeName"
              :value="item.knowledgeName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="true"
            :http-request="uploadAdImg"
          >
            <img
              v-if="ad.advertisementPic"
              :src="ad.advertisementPic"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAdSetting = false">取 消</el-button>
        <el-button type="primary" @click="fetchAddAd" :loading="isAdding"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="articleTotal"
    >
    </el-pagination>
  </div>
</template>


<script>
import { formatDate } from "../util";
import {
  getKnowledgeList,
  changeShowStatus,
  changeAuthorityStatus,
  createAd,
  getAdTitle,
  collectNum,
} from "../api/version2";

export default {
  name: "ArticleList",
  data() {
    return {
      isUse: false,
      knowledgeId: "",
      editNum: false,
      collectData: {
        collectNum: "",
        browNum: "",
      },
      searchText: "",
      articleList: [],
      articleLoading: false,
      articleTotal: 0,
      pageSize: 10,
      enterpriseId: null,
      roleTitle: "",

      isShowAdSetting: false,
      isAdding: false,
      ad: {
        knowledgeId: "",
        advertisementPic: "",
        title: "",
      },
      advertisingList: [],
      adType: 1,
      adTypes: ["首页弹窗广告"],
    };
  },
  methods: {
    goBack() {
      history.back();
    },

    // -----------------------------------------------

    handlePagi(page) {
      // 分页
      this.fetchKnowledgeList(page);
    },
    handleChange(data, e) {
      console.log(data);
      console.log(e);
      // 改变状态
      this.$confirm(
        `${e ? "启用" : "禁用"}该视频后, ${
          e ? "该视频可在客户端正常展示" : "该视频不在客户端展示"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((r) => {
          if (this.roleTitle == "超级管理员") {
            this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3, 0);
          } else {
            this.fetchSetStatus1(data.knowledgeId, Number(e));
          }
        })
        .catch((err) => {
          data.enable = !e;
        });
    },
    setToFirstShow(row) {
      // 设置为在公司信息中置顶显示
      console.log(row);
    },
    fetchSetStatus1(knowledgeId, type) {
      // 设置显示状态
      changeShowStatus({
        knowledgeId: knowledgeId,
        knowledgeLife: type,
      })
        .then((res) => {
          // console.log(res);
          this.$message.success("操作成功");
          this.fetchKnowledgeList(1);
        })
        .catch((e) => {});
    },
    fetchSetStatus2(knowledgeId, type, life) {
      // 设置审核状态
      changeAuthorityStatus({
        knowledgeId: knowledgeId,
        knowledgeStatus: type,
        knowledgeLife: life,
      })
        .then((res) => {
          console.log(res);
          this.$message.success("操作成功");
          this.fetchKnowledgeList(1);
        })
        .catch((e) => {});
    },
    delArticle(article) {
      // 删除文章
      this.$confirm(`确定删除该文章吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((r) => {
          console.log(article);
        })
        .catch((err) => {});
    },
    checkAuthorityStatus(data, type, life) {
      if (!this.$checkAuth("isUserStatus")) {
        return this.$message.error("暂无对应操作权限!");
      }
      // 改变审核状态
      this.$confirm(
        `确定${type == 1 ? "通过" : "驳回"}该视频的发布申请吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((r) => {
          this.fetchSetStatus2(data.knowledgeId, type, life);
        })
        .catch((err) => {});
    },
    clearSearch() {
      // 清除搜索
      if (!this.searchText.trim()) {
        this.fetchKnowledgeList(1);
      }
    },
    changeStatus(row) {
      // 改变状态
      console.log(row);
    },
    goAddArticle() {
      // 添加文章
      this.$router.push("/operation/add?type=1");
      // this.$router.push('/operation/add');
    },
    lookArticle(article) {
      // 查看文章详情
      this.$router.push(`/operation/article/detail/${article.knowledgeId}`);
    },

    editArticle(article) {
      // console.log(article);
      // 修改文章
      this.$router.push("/operation/add/?id=" + article.knowledgeId);
    },
    handleSearch() {
      // 搜索事件
      if (this.articleLoading) return;
      if (!this.searchText.trim()) {
        return this.$message.error("搜索内容不能为空");
      }
      this.fetchKnowledgeList(1);
    },

    fetchKnowledgeList(index) {
      // 查询知识列表
      this.articleLoading = true;
      getKnowledgeList({
        index,
        count: this.pageSize,
        queryParam: {
          knowledgeType: 0,
          enterpriseId: this.enterpriseId,
          knowledgeName: this.searchText || null,
        },
      })
        .then((res) => {
          console.log(res);
          this.articleLoading = false;
          let list = res.data.data.list || [];
          list.forEach((item) => {
            // item.createDate = formatDate(item.createDate, "ZH");
            item.createDate = formatDate(item.createDate);
            item.id = item.knowledgeId.slice(5);
            item.enable = Boolean(item.knowledgeLife);
            item.totalBrowNum = Number(item.browse + item.fakeBrowseNumber);
            item.totalCollectNum = Number(
              item.collection + item.fakeCollectionNumber
            );
            // this.enterpriseName = list.enterpriseName;
          });

          this.articleList = list;
          this.articleTotal = res.data.data.totalRecord;
        })
        .catch((e) => {
          this.articleLoading = false;
        });
    },

    // 设为广告
    setToAd(row) {
      // console.log(row);
      this.isShowAdSetting = true;
      this.ad.knowledgeId = row.knowledgeId;
      getAdTitle({
        knowledgeId: row.knowledgeId,
      }).then((res) => {
        // console.log(res);
        this.advertisingList = res.data.data || [];
      });
    },

    // 修改浏览、收藏量
    editCollectNum(row) {
      console.log(row);
      this.editNum = true;
      this.knowledgeId = row.knowledgeId;
      this.collectData.collectNum = row.fakeCollectionNumber;
      this.collectData.browNum = row.fakeBrowseNumber;
    },

    isShowEdit() {
      let collNum = Number(this.collectData.collectNum);
      let browNum = Number(this.collectData.browNum);
      if (collNum == null && browNum == null) {
        this.$message.error("您还没有输入!请输入！");
      } else {
        collectNum({
          knowledgeId: this.knowledgeId,
          fakeBrowseNumber: browNum,
          fakeCollectionNumber: collNum,
        }).then((res) => {
          this.$message.success("修改成功");
          this.fetchKnowledgeList(1);
          this.editNum = false;
          this.collectData.browNum = "";
          this.collectData.collectNum = "";
        });
      }
    },

    // 设为广告
    fetchAddAd() {
      this.isAdding = true;
      createAd(this.ad).then((res) => {
        // console.log(res);
        this.isAdding = false;
        this.isShowAdSetting = false;
        this.$message.success("操作成功");
      });
    },
    uploadAdImg({ file }) {
      // 上传广告图片
      const that = this;
      fileToBase64(file, (str) => {
        uploadImage(str)
          .then((res) => {
            let path = res.data.data.path;
            path = path.replace("http:", "https:");
            that.ad.advertisementPic = path;
          })
          .catch((e) => {});
      });
    },
  },
  created() {
    let roleTitle = sessionStorage.getItem("roleTitle") || "";
    this.roleTitle = roleTitle;
    // this.enterpriseId = this.$route.params.enterpriseId;
    let enterpriseId = sessionStorage.getItem("enterpriseId");
    // this.enterpriseName = sessionStorage.getItem("enterpriseName");
    if (roleTitle == "公司") {
      this.enterpriseId = enterpriseId;
      // this.enterpriseName = this.enterpriseName;
    }
    this.fetchKnowledgeList(1);
  },
};
</script>
<style lang="scss" scoped>
.head-search {
  display: flex;
  justify-content: space-between;
}


</style>
